<template>
	<div class="">
		<!-- 公共头部 -->
		<head-top></head-top>
		<!-- 轮播 -->
		<swiper class="hd-swiper">
			<swiper-item class="hd-swiper-item">
				<image mode="widthFix" src="http://image.haiav.com/images/20181217163336_29318.jpg"/>
			</swiper-item>	
		</swiper>
		<div class="shop-container">
			<!-- 菜单 -->
			<view class="menu-list">
				<view class="menu-item" @click="navigateTo('/pages/goods/index?id='+goodsId)">
					<h3>产品</h3>
					<p>product</p>
				</view>
				<view v-if="newList.length>1" class="menu-item" @click="navigateTo('/pages/information/index?id='+goodsId)">
					<h3>资讯</h3>
					<p>news</p>
				</view>
				<view v-if="askList.length>1" class="menu-item" @click="navigateTo('/pages/answers/index?id='+goodsId)">
					<h3>问答</h3>
					<p>problem</p> 
				</view>
				<view v-if="roteList.length>1" class="menu-item" @click="navigateTo('/pages/reputation/index?id='+goodsId)">
					<h3>评价</h3>
					<p>evaluate</p>
				</view>
				<view class="menu-item" @click="navigateTo('/pages/shop/price?id='+goodsId)">
					<h3>价格表</h3>
					<p>Price</p>
				</view>
			</view>
			<!-- 品牌介绍 -->
			<div class="shop-introduce" v-if="contentInfo!=''">
				<div class="shop-introduce-title">
					<h3><span>{{shopName}}</span>品牌介绍</h3>
					<p>Brand introduction</p>
				</div>
				<div class="shop-introduce-desc">
					<p  :class="{active:isActive}" v-html="contentInfo"></p>
                    <div  style="text-align: center;padding-top:10px">
                        <p @click="isActive=false" v-if="isActive">点击展开</p>
                        <p @click="isActive=true" v-if="!isActive">点击收起</p>
                        <i @click="isActive=false" v-if="isActive" class="hd-icon">&#xe603;</i>
                        <i @click="isActive=true" v-if="!isActive" class="hd-icon">&#xe60c;</i>
                    </div>
				</div>
			</div>	
			<!-- 品牌介绍 -->
			<div class="shop-introduce">
				<div class="shop-introduce-title">
					<h3><span>{{shopName}}</span>最新产品</h3>
					<p>Latest product</p>
				</div>
				<view class="shop-goods-list">
					<view class="li" v-for="(item,index) in newGoods" :key="index" @click="navigateGoods(item.id,'roteid')">
						<img class="goods-img" :src="item.logo"/>
						<div>
							<h3>{{item.title}}</h3>
							<p>RMB<span>{{item.price}}</span></p>
						</div>
						<!--#ifndef APP-PLUS-->
						<image class="goods-icon" src="/static/shop-new.png"/>
						<!--#endif-->
					</view>
				</view>
			</div>	
			<!-- 热销排行 -->
			<div class="shop-introduce">
				<div class="shop-introduce-title">
					<h3><span>{{shopName}}</span>热销排行</h3>
					<p>Latest product</p>
				</div>
				<view class="shop-goods-list">
					<view class="li" v-for="(item,index) in hotGoods" :key="index" @click="navigateGoods(item.id,'roteid')">
						<img class="goods-img" :src="item.logo"/>
						<div>
							<h3>{{item.title}}</h3>
							<p>RMB<span>{{item.price}}</span></p>
						</div>
						<!--#ifndef APP-PLUS-->
						<image  class="goods-icon" src="/static/shop-new.png"/>
						<!--#endif-->
					</view>
				</view>
			</div>	
			<!-- 最新评价 -->
			<div class="shop-introduce" v-if="roteList.length>1">
				<div class="shop-introduce-title">
					<h3><span>{{shopName}}</span>最新评价</h3>
					<p>Latest evaluation</p>
				</div>
				<view class="shop-rote-list">
					<view class="li" v-for="(item,index) in  roteList" :key="index" @click="navigateGoods(item.id,'roteid')">
						<image class="shop-rote-img" :src="item.logo"/>
						<div class="shop-rote-right">
							<h3 class="shop-rote-right-title">{{item.stitle}}</h3>
							<view class="shop-rote-right-list">
								<view class="hd-icon">&#xe608;</view>
								<view class="hd-icon">&#xe608;</view>
								<view class="hd-icon">&#xe608;</view>
								<view class="hd-icon">&#xe608;</view>
								<view class="hd-icon">&#xe608;</view>
							</view>
							<p class="shop-rote-right-desc">{{item.pingjiaremark}}</p>
						</div>
					</view>
				</view>
			</div>	
			<!-- 百问百答 -->
			<div class="shop-introduce" v-if="askList.length>1">
				<div class="shop-introduce-title">
					<h3><span>{{shopName}}</span>百问百答</h3>
					<p>Question answer</p>
				</div>
				<view class="answers-list">
					<view  class="li" @click="navigateTo('/pages/answers/details?id='+item.id)" v-for="(item,index) in askList" :key="index">
						<div class="answers-q">
							<h3><span>Q</span>{{(item.title).substring(0,14)}}... </h3>
							<p><span>{{item.count?item.count:0}}</span>个回答</p>
						</div> 
						<div class="answers-a">
							<span>A</span>
							<p>{{item.answer?item.answer:'暂无相关回答'}}</p> 
						</div>
					</view>
				</view>
				<div class="all-information" @click="navigateTo('/pages/answers/index?id='+goodsId)">
					<i class="hd-icon">&#xe893;</i>
					<span>更多产品问题</span>
				</div>
			</div>	
			<!-- 热门资讯 -->
			<div class="shop-introduce" v-if="newList.length>1">
				<div class="shop-introduce-title">
					<h3><span>{{shopName}}</span>热门资讯</h3>
					<p>Latest evaluation</p>
				</div>
				<view class="shop-rote-list">
					<view class="li" v-for="(item,index) in  newList" :key="index" @click="navigateTo('/pages/information/details?id='+item.id)">
						<img class="shop-rote-img" :src="item.logo"/>
						<div class="shop-rote-right">
							<h3 class="shop-rote-right-title">{{item.title}}</h3>
							<p class="shop-rote-right-desc">{{item.remark}}</p>
						</div>
					</view>
				</view>
			</div>	
		</div>	
		<div class="brand-contanier">
			<div class="title">
				<h3>其他品牌</h3>
			</div>
			<view class="brand-list">
				<view class="li" :key="index"  v-for="(item,index) in brandList" @click="navigateTo('/pages/shop/index?id='+item.id)">{{item.name}}</view>
			</view>
		</div>	
		<foot-bottom></foot-bottom>
		<fab :topBtn="isTopBtn"></fab>
	</div>
</template>

<script>
	import footBottom from '@/components/footBottom'; //公共底部
	import fab from '@/components/fab'
	import { getIndex,goodsList,getRote,getNews } from '@/api/shop'
	export default {
		data() {
			return {
				isTopBtn:false,
				newGoods:[],
				hotGoods:[],
				roteList:[],
				askList:[],
				newList:[],
                brandList:[],
				goodsId:'',
				shopName:'',
                contentInfo:'',
                isActive:true
			}
		},
		components:{
			footBottom,
			fab
		},
		onLoad(e) {
			this.goodsId = e.id;
			getIndex(e.id).then((res)=>{
				this.newGoods = res.data.datas.newGoodsList;
				this.hotGoods = res.data.datas.salesGoodsList;
				this.shopName = res.data.datas.siteInfo.name;
                this.contentInfo = res.data.datas.siteInfo.content;
                this.askList = res.data.datas.askList;
                this.newList = res.data.datas.articleList;
                this.roteList = res.data.datas.newCommentList;
                this.brandList = res.data.datas.brandList;
				
				// 动态设置店铺名称
				uni.setNavigationBarTitle({
				    title: this.shopName
				});
			})
		},
		onPageScroll(e){
			if(e.scrollTop>=400){
				this.isTopBtn=true
			}
			if(e.scrollTop<=100){
				this.isTopBtn=false
			}
		},
		methods: {
			navigateTo(url){
				uni.navigateTo({
				    url: url
				});
			},
			trigger(e){
				uni.redirectTo({
				    url: e.item.url
				}); 
			},
            navigateGoods(id,type) {
            	this.$Shop.navigateGoods(id,type);
            },
		}
	}
</script>

<style lang="scss">
	.hd-swiper{
		width:100%;
		height:292rpx;
		background: #fff;
		margin-top:110rpx;
		.hd-swiper-item{
			width:100%;
			height:100%;
			image{
				width:100%;
			}
		}
	}
	.shop-container{
		background: #fff;
		padding-top:20rpx;
		.menu-list{
			width:720rpx;
			margin:0 auto;
			display: flex;
			justify-content: flex-start;
			padding:25rpx 0;
			background: #fd8197;
			.menu-item{
				width:20%;
				text-align: center;
				&:before {
					content: "";
					float: left;
					width: 1px;
					height:30rpx;
					background: #fff;
					margin-top: 25rpx;
				}
				&:nth-of-type(1):before{
					width:0;
				}
				h3{
					font-size:30rpx;
					color:#fff;
				}
				p{
					font-size:26rpx;
					color:#fff;	
				}
			}
		}
		.shop-introduce{
			margin-top:40rpx;
			.shop-introduce-title{
				width:720rpx;
				margin:0 auto;
				text-align: center;
				h3{
					font-size:32rpx;
					font-weight: bold;
					span{
						font-weight: normal;
						color:#ff6980;
						border-right:2px solid #fd697f;
						padding-right:14rpx;
						margin-right:14rpx;
					}
				}
				p{
					font-size:30rpx;
					text-transform: uppercase;
					color: #666;
					&:after {
						content: "";
						display: block;
						width:47rpx;
						height:4rpx;
						margin: 10rpx auto 0;
						background: #ff6980;
					}
				}
			}
			.shop-introduce-desc{
				background: #f4f5f9;
				width:720rpx;
				margin:0 auto;
				margin-top:30rpx;
				padding:20rpx 0;
				p{
					width:680rpx;
					margin:0 auto;
					color:#333;
					font-size:30rpx;
					line-height:46rpx;
                    &.active{
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display:-webkit-box; //作为弹性伸缩盒子模型显示。
                        -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
                        -webkit-line-clamp:2; //显示的行
                    }
				}
			}
			.shop-goods-list{
				width:720rpx;
				margin:0 auto;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-top:30rpx;
				.li{
					width:350rpx;
					margin-bottom:20rpx;
					position: relative;
					.goods-img{
						width:350rpx;
						height:350rpx;
					}
					.goods-icon{
						width:78rpx;
						height:78rpx;
						position: absolute;
						left:0;
						top:0;
						z-index: 99;

					}
					div{
						background: #efefef;
						height: 168rpx;
						position:relative;
						h3{
							color:#333;
							font-size:28rpx;
							width:310rpx;
							margin:0 auto;
							padding-top:10rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display:-webkit-box; 
							-webkit-box-orient:vertical; 
							-webkit-line-clamp:2;
						}
						p{
							width:310rpx;
							margin:0 auto;
							color:#ff6980;
							font-size:30rpx;
							position:absolute;
							bottom:20rpx;
							left:20rpx;
							span{
								font-size:40rpx;
								font-family: impact;
								margin-left:8rpx;
							}
						}
					}
				}
			}
			.shop-rote-list{
				width:720rpx;
				margin:0 auto;
				&>.li{
					display: flex;
					justify-content: space-between;
					padding:20rpx 0;
					border-bottom:1px solid #eee;
					image{
						width:170rpx;
						height:170rpx;
						border-radius: 50%;
					}
					.shop-rote-right{
						width:520rpx;
						.shop-rote-right-title{
							font-size:30rpx;
							color:#333;
						}
						.shop-rote-right-list{
							display: flex;
							justify-content: flex-start;
							margin-top:10rpx;
							.hd-icon{
								color: #f4ba09;
							}
						}
						.shop-rote-right-desc{
							color:#999;
							line-height: 40rpx;
							margin-top:10rpx;
							font-size:30rpx;
						}
					}
				}
			}
			.answers-list{
				width:700rpx;
				margin:0 auto;
				margin-top:30rpx;
				.li{
					padding-bottom:20rpx;
					border-bottom:1px dotted  #eee;
					margin-bottom:20rpx;
				}
				.answers-q{
					display: flex;
					justify-content: space-between;
					h3{
						margin-bottom:10rpx;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						color:#fd8197;
						font-size:30rpx;
						span{
							display: block;
							background: #fd8197;
							color:#fff;
							padding:2px 6px;
							border-radius: 4px;
							margin-right:6px;
						}
					}
					p{
						font-size:30rpx;
						span{
							color:#fd8197;
						}
						color:#666;
					}
				}
				.answers-a{
					display: flex;
					justify-content: flex-start;
					margin-top:16rpx;
					span{
						font-size:30rpx;
						display: block;
						background: #1bca8a;
						color:#fff;
						border-radius: 4px;
						margin-right:6px;
						width:52rpx;
						height:40rpx;
						line-height: 40rpx;
						text-align: center;
					}
					p{
						color:#666;
						font-size:30rpx;
						line-height: 18px;
						width: 640rpx;
					}
				}
			}
		}
	}
	
	.all-information{
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding-bottom:20rpx;
		font-size:30rpx;
		color:#333;
		i{
			margin-right:6rpx;
		}
	}
	.brand-contanier{
		padding: 0 18.75rpx;
		margin: 37.5rpx 0;
		.title{
			h3{
				font-size:37.5rpx;
				text-align: center;
			}
		}
		.brand-list{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top:25rpx;
			.li{
				width:33.3%;
				text-align: left;
				padding: 12rpx 0;
				white-space: nowrap;
				font-size:24rpx;
				color:#333;
			}
		}
	}
	.copyright{
		text-align: center;
		font-size:24rpx;
		color:#333;
		margin-bottom:148rpx;
		span{
			color:#999;
			margin-right:15rpx;
		}
	}
</style>
